<template>
  <div>
    <div class="content">
      <ZwSearchForm row-num="3" :option="searchOption" @search="search" @reset="reset" />
      <ZwTable ref="tableRef" class="table-box" :option="tableOption" :fetch-params="state.searchParams" :fetch-api="fetch()" >
      
      </ZwTable>
    </div>
    <ZWDeletdialog ref="DeletdialogRef" @submit="onSubmit" />
    <TransCustomer :open="isopenCustomer" :seas_id="props.seas_id" :title="title" :rowid="rowid" @close="isopenCustomer = false" @submit="reset()"></TransCustomer>
  </div>
</template>
<script lang="tsx" setup>
import { ref, reactive, watch, computed } from 'vue'
import { ElMessage, ElButton } from 'element-plus'
import ZwTable from '@/components/zw/table/Table'
import ZwSearchForm from '@/components/zw/search-form/SearchForm'
import { seaList } from '@/api/customer/clubManage/commonSea'
import { getClubLevel } from '@/api/customer/clubManage/commonSea'
import { deepCopy } from '@/utils/helper'
import TransCustomer from './TransCustomer.vue'
import ZWDeletdialog from '@/components/ZWDeletdialog.vue'
const DeletdialogRef: any = ref(null)
const isShow = ref(0)
const emit = defineEmits(['close'])
const zwRef = ref(null)
const props = defineProps(['clubopen', 'rowid', 'title', 'seas_id'])
const tableRef = (ref < HTMLElement) | (null > null)
const defaultParams = {
  belong_uid: [] //所属员工id
}
const isopen = ref(false)
const rowid = ref(null) //行线索id
let title = ref('') //流转记录抽屉标题
let isopenCustomer = ref(false) //判断转化客户抽屉是否打开
const state = reactive({
  searchParams: deepCopy(defaultParams)
})

const searchOption = computed(() => {
  return [
    {
      label: '执行员工',
      name: 'belong_uid',
      value: [],
      type: 'select',
      placeholder: '请选择执行员工',
      multiple: true,
      popperClass: 'zw-hide_select_option',
      isUserSelect: true,
      formatOption: (v: any) => ({
        label: v.name,
        value: v.id
      })
    },
    {
      label: '线索等级',
      name: 'xiansuo',
      value: '',
      type: 'select',
      placeholder: '请选择线索等级',
      fetchOptionApi: () => {
        return new Promise((resolve) => {
          getClubLevel({ page: 1, page_size: 99 }).then((res: any) => {
            let levelid: any = []
            res.data.forEach((item: any) => {
              console.log(item)
              levelid.push(item)
              resolve(levelid)
            })
          })
        })
      },
      formatOption: (v: any) => ({
        label: v.name,
        value: v.id
      })
    }
  ]
})
let tableOption = [
  {
    type: 'selection',
    width: 55,
    fixed: 'left'
  },
  {
    prop: 'operation_msg',
    label: '手机号'
  },
  {
    prop: 'owner_before',
    label: '线索名称'
  },
  {
    prop: 'owner_before',
    label: '线索等级'
  },
    {
    prop: 'owner_before',
    label: '放弃原因'
  },
  {
    prop: 'created_at',
    label: '放弃时间'
  },
  {
    prop: 'created_at',
    label: '执行人'
  },
  {
    prop: 'operate',
    label: '操作',
    width: 200,
    fixed: 'right',
    isOperate: true,
    renderOperate({ row }) {
      return (
        <>
          <ElButton
            size="small"
            onClick={() => {
              rowid.value = row.id
              title.value = `【${row.name}】的转化客户`
              isopenCustomer.value = true
            }}
          >
            流转记录
          </ElButton>
          <ElButton
            size="small"
            onClick={() => {
              rowid.value = row.id
            }}
          >
            客户详情
          </ElButton>
        </>
      )
    }
  }
]
const fetch = async () => {
  // 获取文件列表
  return seaList
}
const close = () => {
  emit('close')
}

//查询
const search = (v) => {
  state.searchParams = v
}
//清空
const reset = () => {
  state.searchParams = deepCopy(defaultParams)
}

watch(
  () => props.clubopen,
  (val) => {
    if (val) {
      isopen.value = val
      zwRef.value.title = props.title
      zwRef.value.width = '800px'
    }
  }
)
</script>
<style scoped lang="scss">
.content {
  padding: 16px 0;
}
</style>
